<template>
  <div class="app-container">
    <div class="app-container-inner">
      <commonTable
        :loading="loading"
        @selection-change="selectionChange"
        :columns="column"
        :data="list"
        @reset="reset"
        @onSubmit="onSubmit"
      >
        <template v-slot:operation="scope">
          <el-button type="danger" size="small" @click="del(scope.row)"> 删除 </el-button>
          <el-button type="primary" size="small"> 编辑 </el-button>
          <el-button type="primary" size="small"> 复制 </el-button>
        </template>
      </commonTable>
    </div>
  </div>
</template>
<script setup lang="ts">
  import commonTable from '@/components/commonTable/index.vue'
  const loading = ref(false)
  const rowObj = ref({})
  const selectObj = ref([])
  const data = []
  for (let i = 0; i < 100; i++) {
    data.push({
      roleId: 'ID:' + i,
      roleName: '角色' + i,
      roleType: i,
    })
  }
  const list = ref([...data])
  const column = [
    { name: 'operation', slot: true, fixed: 'right', width: 300, label: '操作' },
    { name: 'roleId', label: '角色号', inSearch: true, valueType: 'input' },
    { name: 'roleName', label: '角色名称', inSearch: true, valueType: 'input' },
    {
      name: 'roleType',
      label: '角色类型',
      inSearch: true,
      valueType: 'input',
      align: 'center',
    },
  ]
  const selectionChange = (val) => {
    selectObj.value = val
  }
  const del = (row) => {
    console.log('view', row)
  }
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
    ElMessage.success('触发重置方法')
  }
  const onSubmit = (val) => {
    console.log('val===', val)
    ElMessage.success('触发查询方法')
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
</script>

<style scoped></style>
